<template>
  <div class="box">
    <div class="detailss" :style="{ backgroundImage: 'url(' + img1 + ')' }">
      <div class="left">
        <span @click="goBack">&lt;</span>
        <p>订单详情</p>
      </div>
      <div class="right">
        <span class="iconfont icon-gouwuche"></span>
      </div>
    </div>
    <div class="reminder" :style="{ backgroundImage: 'url(' + img2 + ')' }">
      <span>{{ state }}</span>
    </div>
    <div class="sign">
      <div class="details">
        <span class="iconfont icon--"></span>
        <div>
          <p>您的订单已签收,感谢您对小米的支持,永远相信美好的事情即将发生!</p>
          <span>{{ date }}</span>
        </div>
        <span class="more">&gt;</span>
      </div>
    </div>
    <div class="address">
      <div class="details">
        <span class="iconfont icon-wangdianfuwu"></span>
        <div>
          <p>{{ identity }}</p>
          <span>{{ site }}</span>
        </div>
      </div>
    </div>
    <div class="boxs" v-for="(pays, index) in pay" :key="index">
      <div class="top">
        <div class="left">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaomixinLogo"></use>
          </svg>
          <span>{{ pays.source }}</span>
        </div>
        <div class="right">{{ pays.state }}</div>
      </div>
      <div class="goods" v-for="payss in pay[index].arr" :key="payss.index">
        <div class="left">
          <img :src="payss.img" alt="" />
          <div>
            <p>{{ payss.name }}</p>
            <span>{{ payss.color }}</span>
          </div>
        </div>
        <div class="right">
          <p>{{ payss.price }}</p>
          <div>
            <span>x</span><span>{{ payss.number }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="figure">
      <div class="amount">
        <p>
          <span>订单金额:</span>
          <span>{{ prices }}</span>
        </p>
        <P>免运费</P>
      </div>
      <p class="p">
        <span>实付金额</span>
        <span>{{ actually }}</span>
      </p>
    </div>
    <div class="invoice">
      <p>
        <span>下单时间</span>
        <span>{{ placeAnOrder }}</span>
      </p>
      <p>
        <span>付款时间</span>
        <span>{{ timeOfPayment }}</span>
      </p>
      <p>
        <span>订单编号</span>
        <span>{{ id }}</span>
      </p>
      <p>
        <span>发票类型</span>
        <span>{{ invoice }}</span>
      </p>
      <p>
        <span>发票抬头</span>
        <span>{{ invoiceTitle }}</span>
      </p>
      <div class="last">
        <span>查看发票</span>
        <span>联系客服</span>
      </div>
    </div>
    <div class="ss"></div>
    <likelike />
    <div class="base">
      <span>删除订单</span>
      <span>申请售后</span>
      <span class="evaluate">评价</span>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Empty } from "vant";
import axios from "axios";
import store from "../store/index";
import likelike from "./details/likelike.vue";
Vue.use(Empty);
export default {
  name: "order",
  data() {
    return {
      img1: require("../../public/img/xiangqing_02.jpg"),
      img2: require("../../public/img/xiangqing_03.jpg"),
      pay: [],
      state: "",
      date: "",
      identity: "",
      site: "",
      prices: "",
      actually: "",
      placeAnOrder: "",
      timeOfPayment: "",
      id: "",
      invoice: "",
      invoiceTitle: ""
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
  },
  components: {
    likelike
  },
  created() {

    axios({
      url: "http://localhost:3000/"+this.$store.state.port+"?id="+this.$store.state.orderDetails,
      method: "get",
      params: {
        type: this.type,
      },
    }).then((res) => {
      this.pay = res.data;
      this.state = res.data[0].state;
      this.date = res.data[0].date;
      this.identity = res.data[0].identity;
      this.site = res.data[0].site;
      this.prices = res.data[0].prices;
      this.actually = res.data[0].actually;
      this.placeAnOrder = res.data[0].placeAnOrder;
      this.timeOfPayment = res.data[0].timeOfPayment;
      this.id = res.data[0].id;
      this.invoice = res.data[0].invoice;
      this.invoiceTitl = res.data[0].invoiceTitl;
      console.log(res.data[0]);
    });
  },
};
</script>

<style scoped>
@import url(../assets/xiaomi-iconfont/iconfont.css);
.detailss {
  width: 100%;
  height: 0.44rem;
  display: flex;
  box-sizing: border-box;
  padding: 0 0.18rem;
  align-items: center;
  justify-content: space-between;
  background-size: 100%;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
}
.detailss .left {
  font-size: 0.15rem;
  display: flex;
  align-items: center;
}
.detailss .left span {
  font-size: 0.22rem;
  line-height: 0.2rem;
  margin-right: 0.18rem;
  color: white;
}
.detailss .right .iconfont {
  font-size: 0.17rem;
  margin-left: 0.18rem;
}
.reminder {
  margin-top: 0.43rem;
  height: 0.73rem;
  background-size: 100%;
  display: flex;
  align-items: center;
}
.reminder span {
  color: white;
  font-size: 0.18rem;
  margin-left: 0.36rem;
}
.sign {
  height: 0.8rem;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.18rem;
}
.sign .details {
  display: flex;
  height: 0.47rem;
  align-items: space-between;
}
.sign .details div {
  color: black;
  font-size: 0.12rem;
}
.sign .details div p {
  margin-bottom: 0.05rem;
}
.sign .details div span {
  color: #969698;
}
.sign .details .more {
  color: #aaaaaa;
  font-size: 0.24rem;
  font-weight: 100;
}
.sign .details .icon-- {
  color: black;
  align-self: flex-start;
  margin-right: 0.05rem;
}
.address {
  margin-top: 0.08rem;
  height: 0.62rem;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.18rem;
}

.address .details {
  display: flex;
  height: 0.34rem;
  align-items: space-between;
}
.address .details .icon-wangdianfuwu {
  color: black;
  align-self: flex-start;
  margin-right: 0.05rem;
  font-size: 0.14rem;
}
.address .details div {
  color: black;
  font-size: 0.12rem;
}
.address .details div p {
  margin-bottom: 0.05rem;
}
.address .details div span {
  color: #969698;
  font-size: 0.11rem;
}
.icon {
  width: 0.18rem;
  height: 0.18rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.boxs {
  margin-top: 0.06rem;
  background: #f5f5f5;
}
.top {
  height: 0.35rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top .left {
  font-size: 0.14rem;
  margin-left: 0.12rem;
  display: flex;
}
.top .left span {
  margin-left: 0.05rem;
}
.top .right {
  font-size: 0.14rem;
  color: #fa6016;
  margin-right: 0.16rem;
}
.goods {
  height: 0.76rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.goods .left {
  display: flex;
}
.goods .left div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.goods .left div p {
  font-size: 0.13rem;
}
.goods .left div span {
  font-size: 0.11rem;
  color: #8a8a8a;
}
.goods .right {
  height: 0.5rem;
  margin-right: 0.15rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 0.14rem;
  color: #8c8c8c;
}
.goods img {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.2rem;
  margin-right: 0.1rem;
}
.figure {
  background: #f4f4f4;
}
.figure .p {
  height: 0.38rem;
  display: flex;
  font-size: 0.14rem;
  align-items: center;
  box-sizing: border-box;
  background: #ededed;
  padding: 0 0.15rem;
  color: #c65815;
  justify-content: space-between;
}
.amount {
  margin-top: 0.08rem;
  height: 0.48rem;
  box-sizing: border-box;
  padding: 0 0.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  border-bottom: 1px solid #dfdfdf;
}
.amount p {
  display: flex;
  justify-content: space-between;
  font-size: 0.11rem;
  color: #808080;
}
.invoice {
  overflow: hidden;
  height: 1.74rem;
  background: #f4f4f4;
  box-sizing: border-box;
  padding: 0 0.15rem;
  /* display: flex; */
}
.invoice p {
  display: flex;
  justify-content: space-between;
  font-size: 0.11rem;
  color: #808080;
  margin-top: 0.1rem;
}
.invoice .last {
  display: flex;
  text-align: center;
  justify-content: flex-end;
  margin-top: 0.1rem;
}
.invoice .last span {
  width: 0.75rem;
  height: 0.26rem;
  line-height: 0.26rem;
  text-align: center;
  border: 1px solid #cdcdcd;
  border-radius: 0.13rem;
  font-size: 0.13rem;
  color: #858585;
  margin-left: 0.07rem;
}
.base {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.15rem;
  height: 0.49rem;
  border-top: 1px solid #dfdfdf;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #eaeaea;
  position: fixed;
  bottom: 0;
  left: 0;
}
.base span {
  width: 0.75rem;
  height: 0.26rem;
  line-height: 0.26rem;
  text-align: center;
  border: 1px solid #cdcdcd;
  border-radius: 0.13rem;
  font-size: 0.13rem;
  color: #858585;
  margin-left: 0.07rem;
}
.base .evaluate {
  border: 1px solid #df9369;
  color: #df9369;
}
.ss {
  height: 0.5rem;
}
</style>